import React from 'react';
import {IndexLink,Link} from 'react-router';
class MInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
					defaultInput: ["M-input"],
					Size: {
						small: "M-input-sm",
						large: "M-input-lg"
					}
				}
				this._initInput();

        this._Focus = this._Focus.bind(this);
        this._Blur = this._Blur.bind(this);
        this._Change = this._Change.bind(this);
    };
    _initInput(){
    	this.props.size?this.state.Size[this.props.size] ? this.state.defaultInput.push(this.state.Size[this.props.size]):"":"";
      // this.props.maxLength?this.props.value?this.props.value=this.props.value.substr(0,this.props.maxLength):"":"";
    };
    _Focus(){
    	let InputCache = this.state.defaultInput;
    	InputCache.push("M-input-focus");
    	this.setState({defaultInput:InputCache});
    };
    _Blur(){
    	let InputCache = this.state.defaultInput;
    	InputCache.pop();
    	this.setState({defaultInput:InputCache});
    };
    _Change(e){
      this.props.onChange?this.props.onChange():"";
    };
    render() {
      return (
      	<span className="M-input-wrapper">
      		<input 
      			type={this.props.type} 
      			placeholder={this.props.placeholder} 
      			value={this.props.value}
      			defaultValue={this.props.defaultValue}
      			disabled={this.props.disabled}
      			className={this.state.defaultInput.join(" ")} 
      			onFocus={this._Focus} 
      			onBlur={this._Blur}
      			onChange={this._Change}
      		/>
      		<Link to="/contact/messages" activeClassName="headerActive">Contact</Link>
      		{ this.props.children }
      	</span>
      )
    }
}
module.exports = MInput;